<template>
  <div class="app-container">
    <div class="main">
      <div class="title">设备信息</div>
      <div class="i_warp word_break__break_all">
        <div class="item" v-for="(item, index) in list" :key="index">
          <div class="tips">
            <p>{{ item.tips }}</p>
          </div>
          <div class="val">
            <p>
              {{ item.value }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import devicesTemplateXlsxList from "@/views/equipment-management/list/components/devicesTemplateXlsxList"
import { getDeviceBydeviceCode } from "@/api/equipment-management/view-device"
export default {
  data() {
    return {
      list: []
    }
  },
  created() {
    this.pageInfo()
  },
  methods: {
    pageInfo() {
      let arr1 = ['序列号', '品牌', '设备型号', '设备名称', '激活码', '设备容量', 'CPU', '运行内存', '屏幕尺寸', '屏幕分辨率', '软件版本', '生产商', '出厂日期',]
      let arr2 = ['状态'];
      let { deviceCode = '' } = this.$route.query;
      getDeviceBydeviceCode(deviceCode).then(res => {
        let obj1 = devicesTemplateXlsxList
        if (res.code === 200) {
          let { data = {} } = res;
          let allArr = []
          arr1.forEach(el => {
            let need_v = data[obj1[el]] || '',
              need_k = obj1[el];

            if (need_k) {
              allArr.push({
                tips: el,
                value: need_v,
              })
            }
          })
          this.list = allArr
        } else {
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
.app-container {
  height: 100%;
  overflow: auto;
}

.main {
  background-color: #fff;
  padding: 24px;
  border-radius: 16px;
}

.title {
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  padding-bottom: 36px;
  color: #15181D;
}

.i_warp {
  display: grid;
  grid-gap: 40px 48px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

  .tips {
    font-size: 14px;
    font-weight: normal;
    line-height: 18px;
    color: #8B8B8B;
    padding-bottom: 16px;
  }

  .val {
    font-size: 14px;
    font-weight: normal;
    line-height: 18px;
    color: #15181D;
  }
}
</style>